<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../dist/style/css/base.css">
    <script>
        var deviceWidth = document.documentElement.clientWidth;
        if (deviceWidth > 640) deviceWidth = 640;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
    </script>
</head>

<body>

    <div class="warp h">
        <!--header-->
        <header class="hd br">
            <a href="#123" class="l-icon only-icon">
            <i class="iconfont icon-left1"></i>            
            
        </a>
            <p class="tit2">
                购物车
            </p>
        </header>

        <ul class="order-list">
            <li>
                <div class="line-box"></div>
                <div class="order-itme">
                    <div class="order-box-5">
                        <a href="#">
                            <div class="icon-box">
                                <i class="iconfont myicon icon-gou"></i>
                            </div>
                            <div class="l">
                                <img src="../dist/images/pro_2.jpg" alt="">
                            </div>
                            <div class="r">
                                <p class="tit">
                                    血糖仪
                                </p>
                                <p class="ms-tit">
                                    颜色分类：黄色；
                                </p>
                                <p class="price-num">
                                    <span>¥</span>699

                                </p>
                            </div>
                        </a>
                        <span class="del-btn">
                            <i class="iconfont icon-lajitong"></i>
                        </span>
                        <ul class="num-js">
                            <li class="add">-</li>
                            <li class="num">1</li>
                            <!--  <input type="text" value="1">-->
                            <li class="sub">+</li>
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <div class="line-box"></div>
                <div class="order-itme">
                    <div class="order-box-5">
                        <a href="#">
                            <div class="icon-box">
                                <i class="iconfont myicon "></i>
                            </div>
                            <div class="l">
                                <img src="../dist/images/pro_2.jpg" alt="">
                            </div>
                            <div class="r">
                                <p class="tit">
                                    血糖仪
                                </p>
                                <p class="ms-tit">
                                    颜色分类：黄色；
                                </p>
                                <p class="price-num">
                                    <span>¥</span>699
                                </p>
                            </div>
                        </a>
                        <span class="del-btn">
                            <i class="iconfont icon-lajitong"></i>
                        </span>
                        <ul class="num-js">
                            <li class="add">-</li>
                            <li class="num">1</li>
                            <!--<input type="text" value="1">-->
                            <li class="sub">+</li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>

        <div class="none-car">
            <img src="../dist/images/nonecar.jpg" alt="">
        </div>

        <div class="line-box"></div>

        <div class="pd-box"></div>
        <div class="sub-order-ft">

            <div class="pricesum">
                <div class="icon-box all-btn">
                    <i class="iconfont myicon "></i>
                    <span>全选</span>
                </div>
                合计: <span>¥899.00</span>
            </div>
            <a class="sub-btn">
                提交订单
            </a>
        </div>

    </div>

    <script src="../dist/js/base.js"></script>

    <script>
        // 矫正rem
        function correctrem() {
            var rem_full_width = $("<div id='rem-test' style='width:7.5rem'></div>").appendTo($('body')).width();
            var device_width = Math.min(document.documentElement.clientWidth, 640);
            if (rem_full_width !== device_width) {
                document.documentElement.style.fontSize = (device_width / 7.5) * (device_width / rem_full_width) + 'px';
            }
            $('#rem-test').remove();
        }
        correctrem();

        $(function () {
            $(".order-box-5 a").hammer().bind("tap", function (ev) {
                var $this_i = $(this).find('.icon-box i');                
                if (!$this_i.hasClass("icon-gou")) {
                    // $(".icon-box i").removeClass("icon-gou");
                    $this_i.addClass("icon-gou");
                }else{
                     $this_i.removeClass("icon-gou");
                }
                var bs = false;
                var len =  $(".order-box-5").find('.icon-box i').length
                var len2 =  $(".order-box-5").find('.icon-gou').length
                len==len2 ?  $(".all-btn").find(".icon-box i").addClass("icon-gou"): $(".all-btn").find(".icon-box i").removeClass("icon-gou")
                
            });
            $(".all-btn").hammer().bind("tap", function (ev) {
                 var $this_i = $(this).find('.icon-box i'); 
                  if (!$this_i.hasClass("icon-gou")) {
                    // $(".icon-box i").removeClass("icon-gou");
                    $(".order-box-5").find(".icon-box i").addClass("icon-gou");
                    $this_i.addClass("icon-gou");
                }else{
                    $(".order-box-5").find(".icon-box i").removeClass("icon-gou");
                    
                     $this_i.removeClass("icon-gou");
                }
            });
        })
    </script>

</body>

</html>